<!--
 * @Author: your name
 * @Date: 2022-03-06 21:19:29
 * @LastEditTime: 2022-04-09 12:21:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\blog\detail\Detail.vue
-->
<template>
  <div class="content-detail">
    <template v-if="Object.keys(content).length > 0">
      <!-- 发表人区域 -->
      <div class="user">
        <div class="avatar">
          <img
            :src="content.author.avatar"
            alt=""
            style="width: 50px; height: 50px"
          />
          <span class="name">{{ content.author.name }}</span>
        </div>
        <div
          @click="follow"
          :class="{ follow: true, 'on-follow': isFollow }"
          v-show="content.author.id !== loginUser.id"
        >
          {{ isFollow == false ? '关注' : '已关注' }}
        </div>
      </div>
      <!-- 文章标题和点赞 -->
      <div class="title-dianzan">
        <!-- 文章的标题 -->
        <h2 class="title">标题：{{ content.article_title }}</h2>
        <!-- 点赞区域 -->
        <div class="dianzan" @click="dianZan">
          <img :src="upImg" alt="" />
        </div>
      </div>

      <!-- 图片区域 -->
      <div class="cover-img">
        <el-image
          :src="content.cover_img"
          :preview-src-list="[content.cover_img]"
          alt=""
        />
        <!-- <el-image :src="content.cover_img" fit="contain"></el-image> -->
      </div>
      <!-- 文章区域 -->
      <div class="article">
        <mavon-editor
          :value="content.article"
          defaultOpen="preview"
          :boxShadow="false"
          style="z-index: 1; height: 10vh"
          :editable="false"
          :subfield="false"
          :toolbarsFlag="false"
        ></mavon-editor>
      </div>
      <!-- 文章的点赞数，收藏数，评论数 -->
      <div class="num-container">
        <span>点赞数:{{ content.up_num || 0 }}</span>
        <span>收藏数:{{ content.collection_num || 0 }}</span>
        <!-- <span>评论数:{{ content.comment_num || 0 }}</span> -->
      </div>
    </template>

    <!-- 评论区域 -->
    <div class="comment">
      <span class="comment-title">评论({{ comment.length }}):</span>
      <div v-for="item in comment" :key="item.id" class="item">
        <!-- 用户的头像 -->
        <div class="user-avatar">
          <img :src="item.user.avatar" alt="" />
        </div>
        <!-- 用户的评论和评论时间 -->
        <div class="comment-time">
          <p class="content">{{ item.content }}</p>
          <span class="time">{{ handleTime(item.createTime) }}</span>
        </div>
      </div>
    </div>

    <!-- 评论 -->
    <el-input
      type="textarea"
      placeholder="请输入内容"
      v-model="textarea"
      maxlength="30"
      show-word-limit
      class=""
    >
    </el-input>
    <!-- <div>
      {{ this.$store.state.follow.follows }}
    </div> -->
    <el-button type="success" @click="release" class="comment-btn"
      >评论</el-button
    >
  </div>
</template>

<script>
// 导入本地存储的函数
import db from '@/util/localstorage'
// 导入发送请求的接口
import { getBlogDetail, likeBlog } from '@/api/blog'
// 导入评论方面的接口
import { getMomentDetail, releaseMoment } from '@/api/comment'
// 关注方面的接口
import { addFollow, deleteFollow } from '@/api/follow'
export default {
  name: 'Detail',
  data() {
    return {
      content: {},
      isClick: false,
      comment: [],
      textarea: '',
      loginUser: {},
      isFollow: false // 该变量用于判断是否已经关注了该用户 true 表示已经关注
    }
  },
  // 创建
  created() {
    // 取出存储的用户信息
    this.loginUser = db.get('user')
    const { id } = this.$route.params
    // 获取博客方面的详情
    getBlogDetail({ id }).then((res) => {
      this.content = res.result[0]
      console.log('id获取博客方面的详情', res, this.content)
      // 判断是否已经关注了
      this.judgeIsFollow()
    })
    // 获取博客的所有评论
    this.getContentList(id)
  },
  computed: {
    upImg() {
      return this.isClick == true
        ? require('@/assets/img/_heart.png')
        : require('@/assets/img/heart.png')
    },
    getFollow() {
      return this.$store.state.follow.follows
    }
  },
  methods: {
    // 获取本文章的所有的评论
    getContentList(id) {
      getMomentDetail({ id }).then((res) => {
        console.log('res获取博客的所有评论', res)
        this.comment = res.result
      })
    },
    // 关注别人
    follow() {
      // 先判断是否在数组中可以找到，如果是，就是取消关注，没有的话就是关注
      console.log('是否关注:', this.isFollow)
      if (this.isFollow) {
        // 已经关注
        deleteFollow({ follow_id: this.content.author.id }).then((res) => {
          console.log('增加关注', res)
          this.$message.success('取关成功')
          this.$store.dispatch('follow/getList', {
            id: this.$store.state.user.user.id
          })
        })
      } else {
        // 没有关注
        addFollow({ follow_id: this.content.author.id }).then((res) => {
          console.log('增加关注', res)
          this.$message.success('关注成功')
          this.$store.dispatch('follow/getList', {
            id: this.$store.state.user.user.id
          })
        })
      }
      // 将isFollow 取反
      this.isFollow = !this.isFollow
    },
    // 点赞文章
    dianZan() {
      // 发送点赞的请求
      this.isClick = !this.isClick
      likeBlog({ id: this.content.id }).then((res) => {
        this.$message.success('点赞成功')
        this.content.up_num += 1
      })
    },
    // 发布评论
    release() {
      releaseMoment({
        content_id: this.content.id,
        comment_content: this.textarea
      }).then((res) => {
        // 给出提示
        this.$message.success('评论成功')
        // 重新请求评论的数据
        this.getContentList(this.content.id)
        // 清空评论的输入框
        this.textarea = ''
      })
    },
    // 判读是否已经关注
    judgeIsFollow() {
      let isFollow = this.getFollow.some(
        (item) => item.follow.id == this.content.author.id
      )
      // // 设置 isFollow
      this.isFollow = isFollow
    },
    // 处理时间
    handleTime(time) {
      return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang="scss" scoped>
.content-detail {
  // border: 1px solid red;
  .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .avatar {
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .follow {
      padding: 10px 15px;
      background: blue;
      border-radius: 20px;
      cursor: pointer;
    }
    .on-follow {
      background: #ccc;
    }
  }
  .title-dianzan {
    text-align: center;
    // text-align: center;
    h2 {
      display: inline-block;
    }
    .dianzan {
      display: inline-block;
      cursor: pointer;
      img {
        vertical-align: bottom;
      }
    }
  }
  .cover-img {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .num-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .comment {
    margin-bottom: 20px;
    .comment-title {
      display: inline-block;
      font-size: 20px;
      margin: 20px 0;
      font-weight: bold;
      color: red;
    }
    .item {
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      .user-avatar {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        img {
          margin-top: 6px;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          vertical-align: center;
        }
      }
      .comment-time {
        display: flex;
        flex-direction: column;
        .time {
          color: #ccc;
        }
      }
    }
  }
  .comment-btn {
    margin-top: 10px;
  }
}
</style>
